<!--
 * @Descripttion: 查看运行规程
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-16 09:01:24
 * @LastEditTime: 2021-08-21 16:17:47
-->
<template>
    <div id="operatStand">
        <!-- <van-nav-bar  title="运行规程" left-arrow @click-left="back"/> -->
        <Theader title="运行规程" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <div class="padding-outbox">
            <div v-for="(item,index) in operatStandList" :key="index" class="padding-inbox">
                <div class="padding-top">
                    <span class="dynamicText">{{item.text}}</span>
                </div>
                <div class="padding-top flexItem">
                    <van-icon name="contact" />
                    <span class="staticText">班组：</span>
                    <span class="staticText">{{item.team}}</span>
                </div>
                <div class="padding-top flexItem">
                    <van-icon name="clock-o" />
                    <span class="staticText">更新时间：</span>
                    <span class="staticText">{{item.updateTime}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                operatStandList: [{
                    text: '花园山变电站运行规划',
                    team: '变电维护一班',
                    updateTime: '2021/05/14 09:38'
                }, {
                    text: '下关变电站运行规划',
                    team: '变电维护一班',
                    updateTime: '2021/05/14 09:38'
                }, {
                    text: '花园山变电站运行规划',
                    team: '变电维护一班',
                    updateTime: '2021/05/14 09:38'
                }],
            }
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.push({
                    name: 'dutyHome'
                })
            },
        }
    }
</script>

<style>
    #operatStand .padding-outbox {
        padding: 10px;
        background-color: #F5F6F7;
        height: calc(100vh - 66px);
    }

    #operatStand .padding-inbox {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    #operatStand .padding-top {
        padding-top: 10px
    }

    #operatStand .flexItem {
        display: flex;
        align-items: center;
    }

    #operatStand .staticText {
        color: #333333;
        font-size: 0.8125rem;
        /* min-width: 65px; */
        padding-left: 0.25rem;
    }

    #operatStand .statueText {
        border: 1px solid red;
        color: red;
        text-align: center;
        border-radius: 10px;
    }

    #operatStand .dynamicText {
        font-weight: bold;
        color: #333333;
    }

    #operatStand .flex-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #operatStand .padding-bottom {
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

    #operatStand .container-text {
        height: 70%;
        margin: 10px 20px;
        font-size: 0.8125rem;
        /* color: #999999 */
    }

    #operatStand .text666 {
        color: #666666;
    }
</style>